<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script src="js/jquery-2.1.0.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">

		<!-- 引入组件 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script type="text/javascript" src="js/vue.min.js"></script>
		<script type="text/javascript" src="js/vant.min.js"></script>

		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
		<div id="app">
			<header>
				<van-row>
					<van-col span="21" style="height: 80px;">

						<van-search background="red" placeholder="请输入搜索关键词" v-model="value" />
					</van-col>
					<van-col span="3" style="height: 54px; background-color: red;">
						<van-icon style="margin-top: 10px;" size="40px" name="chat-o"></van-icon>

					</van-col>


				</van-row>
			</header>
			<section style="margin-top: 14px;">
				<van-swipe :autoplay="3000" indicator-color="white">
					<van-swipe-item><img src="img/top1.jpg" /></van-swipe-item>
					<van-swipe-item><img src="img/top2.jpg" /></van-swipe-item>
					<van-swipe-item><img src="img/top3.jpg" /></van-swipe-item>
				</van-swipe>
				<van-row type="flex" justify="space-around" style="margin-top: 20px;margin-bottom:20px;">
					<van-col span="3"><img src="img/a.png" /></van-col>
					<van-col span="3"><img src="img/b.png" /></van-col>
					<van-col span="3"><img src="img/c.png" /></van-col>
					
					
				</van-row>
				<div style="width: 100%;height:50px;background-color: gainsboro;padding-top: 10px;" align="center">
					<div style="width: 95%;height:40px;background-color: ghostwhite;border-radius: 25px 25px 25px 25px;">
						<van-row style="padding: 8px;">
							<van-col span="3">资讯</van-col>
							<van-col span="16">玩转地球，一起嗨歌够</van-col>
							<van-col span="3">更多</van-col>
						</van-row>
					</div>
				</div>
				<van-row style="margin-top: 20px;margin-bottom:20px;">
					<van-col>
						<a href="">热门推荐</a>
					</van-col>
				</van-row>

				<van-row gutter="18">
					<van-col span="8"><img src="img/mai1.jpg" />MissCandy指甲油</van-col>

				</van-row>
				<van-row>
					<van-col span="24"><a href="" style="font-size: 24px;">商品列表</a></van-col>
				</van-row>
				<van-row style="margin-top: 20px;">
					<van-con>
						<van-card num="10" price="1319.00" desc="BNY秋冬新品女装简约小翻领撞色格纹拼接" title="BNX" :thumb="imageURL" />
					</van-con>
				</van-row>
				<van-row>
					<van-con>
						<van-card num="2" price="46.00" desc="春季冷酷女牛仔裤" title="春季牛仔裤" :thumb="imageURL1" />
					</van-con>
				</van-row>
				<van-row>
					<van-con>
						<van-card num="2" price="79.00" desc="大码女装套装2019春仙女减龄胖MM春" title="女装" :thumb="imageURL2" />
					</van-con>
				</van-row>
				<van-row>
					<van-con>
						<van-card num="2" price="79.00" desc="大码女装套装2019春仙女减龄胖MM春" title="女装" :thumb="imageURL3" />
					</van-con>
				</van-row>
				<van-row>
					<van-con>
						<van-card num="2" price="79.00" desc="大码女装套装2019春仙女减龄胖MM春" title="女装" :thumb="imageURL4" />
					</van-con>
				</van-row>

			</section>
			<footer>
				<van-tabbar v-model="active">
					<van-tabbar-item icon="home-o">首页</van-tabbar-item>
					<van-tabbar-item icon="shop-o">分类</van-tabbar-item>
					<van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item>
					<van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
				</van-tabbar>
			</footer>

		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					active: 0,
					value: "",
					imageURL: "img/mai2.jpg",
					imageURL1: "img/mai3.jpg",
					imageURL2: "img/mai4.jpg",
					imageURL3: "img/mai5.jpg",
					imageURL4: "img/mai6.jpg"



				},
				methods: {
					tabChange: function() {
						plus.webview.show(this.views[this.active].name);
					},
					mounted: function() {
						var _this = this;
						document.addEventListener('plusready', function() {
							var currentWebView = plus.webview.currentWeb();
							for (var i = 0; i < _this.views.length; i++) {
								var tempWebView = plus.webview.create(_this.views[i].url, this.views[i], name, {
									top: "46px",
									bottom: "50px",
									scrollIndicator: "none",
									zindex: 1
								});
								currentWebView.append(tempWebView);
							}
							plus.webview.show(_this.views[0], name)
						})
					},
				},

			})
		</script>
	</body>
</html>
